import React, { Component } from 'react'
import { Route, Redirect, Switch, withRouter } from 'react-router-dom'
import { get } from 'utils/http'
import { NavContainer,ListContainer } from './page'
import List from 'components/newslist/listProvider'

export default class morepageEntry extends Component {
    state = {
        type: [],
        nav: '1',
    }
    componentDidMount() {
        this.getTypeList()
        this.getDataList(1)
    }
    async getTypeList() {
        this.type = await get({
            url: `http://h5test.wfdata.club/v1/content/types`,
            headers: {
                'X-Request-Id': 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2ZU6pldHMBk//l5L1Q+RDqF9MYuLFXxaPic0W60EC8gaA==',
                'X-Running-Env': 'Q3OVXEArMgZNlMHtAxpu7ONj6bFtJQXn/rvs04BOX697Tr585tFrKIfZg2KoeUpgvnQYU5SNJ6oll+TA3FcxhCSpa6SvJgmuq4xYqBNA20NJ8ldwleqG5XO+/pJxDWDxaNNMPz7ogAvZMCU05jjILfwfb4xVDID+l4bJCv3PvZscJDIQEUoUSJwLTyrr7tv+gqSf9UY9s9WYRpJ1JOgOJVE/R7GAEfmgKwxF17NRO5ggEi+HSU8VLk4VqV/x4hOj'
            }
        })

        this.setState({
            type: this.type.dataList
        })
    }
    async getDataList(id) {
        this.list = await get({
            url: `http://h5test.wfdata.club/v1/content/type/list?page=1&id=${id}`,
            headers: {
                'X-Request-Id': 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2ZU6pldHMBk//l5L1Q+RDqF9MYuLFXxaPic0W60EC8gaA==',
                'X-Running-Env': 'Q3OVXEArMgZNlMHtAxpu7ONj6bFtJQXn/rvs04BOX697Tr585tFrKIfZg2KoeUpgvnQYU5SNJ6oll+TA3FcxhCSpa6SvJgmuq4xYqBNA20NJ8ldwleqG5XO+/pJxDWDxaNNMPz7ogAvZMCU05jjILfwfb4xVDID+l4bJCv3PvZscJDIQEUoUSJwLTyrr7tv+gqSf9UY9s9WYRpJ1JOgOJVE/R7GAEfmgKwxF17NRO5ggEi+HSU8VLk4VqV/x4hOj'
            }
        })
        if(this.list.data.data){
            this.setState({
                list: this.list.data.data.contentsList
            })
        }
        
    }
    setStyle = (id) => {
        this.setState({
            nav: id
        })
        this.getDataList(id)
    }
    render() {
        return (
            <div
                style={{
                    height: '100%',
                    background: '#fff'
                }}
            >
                <NavContainer>
                    <ul>
                        {this.state.type.map(type => {
                            return <li className={this.state.nav == type.id ? 'active' : ''} onClick={() => this.setStyle(type.id)} key={type.id}>{type.name}</li>
                        })}
                    </ul>
                </NavContainer>
                <ListContainer>
                {this.state.list && <List list={this.state.list}></List>}
                </ListContainer>
            </div>
        )
    }
}
